:::info Note
In order to make it easier for you to use these components, the `rspress/theme` package has been aliased inside Rspress, so you can directly use `@theme` to import these components.
:::

## Badge

The Badge component is used to display a badge. For example:

```tsx title="index.mdx"
import { Badge } from '@theme';

function App() {
  // Using text prop
  return <Badge text="info" type="info" />;

  // Using custom children
  return (
    <Badge>
      <img
        style={{ height: '18px' }}
        src="https://assets.rspack.rs/rspress/rspress-logo.svg"
      />
      <span>Rspress</span>
    </Badge>
  );
}
```

The effect is as follows:

import { Badge } from '@theme';

<Badge text="tip" type="tip" />
<Badge text="info" type="info" />
<Badge text="warning" type="warning" />
<Badge text="danger" type="danger" />
<Badge text="outlined" outline />

Custom children:

import SearchSvg from '@theme-assets/github';

<Badge type="tip">
  <img
    style={{ height: '18px' }}
    src="https://assets.rspack.rs/rspress/rspress-logo.svg"
  />
  <span>Rspress</span>
</Badge>

<Badge type="info">
  <SearchSvg width="16" />
  <span>Github</span>
</Badge>

Inlined with text <Badge text="Tip" />

##### H5 <Badge text="Info" type="info" />

#### H4 <Badge text="Warning" type="warning" />

### H3 <Badge text="Danger" type="danger" />

The types of props included are as follows:

```ts
interface BadgeProps {
  /**
   * The content to display inside the badge. Can be a string or React nodes.
   */
  children?: React.ReactNode;
  /**
   * The type of badge, which determines its color and style.
   * @default 'tip'
   */
  type?: 'tip' | 'info' | 'warning' | 'danger';
  /**
   * The text content to display inside the badge (for backwards compatibility).
   */
  text?: string;
  /**
   * Whether to display the badge with an outline style.
   * @default false
   */
  outline?: boolean;
}
```

## Head

It is generally used to set custom head content in documents (based on [unhead](https://www.npmjs.com/package/unhead)). The usage is as follows:

```tsx title="index.tsx"
// Below is a custom component, you can import it into your document
import { Head } from '@rspress/core/runtime';

function App() {
  return (
    <Head>
      <meta property="og:description" content="Out-of-box Rspack build tools" />
    </Head>
  );
}
```

## HomeFeature

Feature component in Hero page, look [the effect in this website](/).

```tsx
import { HomeFeature } from '@rspress/core/theme';

interface Feature {
  title: string;
  details: string;
  icon: string;
  // only support [3, 4, 6]
  span?: number;
  link?: string;
}

export type Features = Feature[];
```

## HomeHero

Hero component in Hero page.

```tsx
import { HomeHero } from '@rspress/core/theme';

interface Hero {
  name: string;
  text: string;
  tagline: string;
  image?: {
    src: string | { dark: string; light: string };
    alt: string;
  };
  actions: {
    text: string;
    link: string;
    theme: 'brand' | 'alt';
  }[];
}
```

## LastUpdated

The LastUpdated component is used to display the last update time of the current page. For example:

```tsx title="index.mdx"
import { LastUpdated } from '@theme';

function App() {
  return <LastUpdated />;
}
```

:::tip

If `lastUpdated: true` is not configured in the default theme, you need to install and register the `@rspress/plugin-last-updated` plugin.

:::

## NoSSR

Used to skip the ssr for some components. For example:

```tsx
import { NoSSR } from '@rspress/core/runtime';

const Component = () => {
  return (
    <NoSSR>
      <div>The content here will only be rendered on the client side</div>
    </NoSSR>
  );
};
```

## Overview

Overview component, look [the effect in this website](/api/)

```tsx
import { Overview } from '@rspress/core/theme';

interface GroupItem {
  text?: string;
  link?: string;
  headers?: Header[];
}

interface Group {
  name: string;
  items: GroupItem[];
}

interface OverviewProps {
  // content before data rendering
  content?: React.ReactNode;
  // data
  groups?: Group[];
  // default title
  defaultGroupTitle?: string;
  // headers displayed in the overview page of the file
  overviewHeaders?: number[];
}
```

## PackageManagerTabs

The PackageManagerTabs component is used to display commands for different package managers in the documentation. The usage is as follows:

```tsx title="index.mdx"
import { PackageManagerTabs } from '@theme';

function App() {
  return <PackageManagerTabs command="install -D @rspress/core" />;
}
```

The effect is as follows:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="install -D @rspress/core" />

The types of props included are as follows:

```ts
type PackageManagerTabProps = (
  | {
      command: string;
      /**
       * If true, uses local package execution (npx, yarn, pnpm, bun, deno run).
       * For locally installed packages in node_modules.
       */
      exec?: boolean;
      /**
       * If true, uses remote package execution (npx, yarn dlx, pnpm dlx, bunx, deno run).
       * For executing packages directly from registry without installing locally.
       * Takes precedence over exec prop.
       */
      dlx?: boolean;
    }
  | {
      command: {
        // Used to set commands for different package managers
        npm?: string;
        yarn?: string;
        pnpm?: string;
        bun?: string;
        deno?: string;
      };
      exec?: never;
      dlx?: never;
    }
) &
  // Used to set additional tabs
  {
    additionalTabs?: {
      // Used to set additional package managers
      tool: string;
      // Used to set the icon of the additional package manager
      icon?: ReactNode;
    }[];
  };
```

When `command` is set to a string, it will default to displaying five tabs: npm, yarn, pnpm, bun and deno, and the component will automatically add the corresponding package manager command before the command. If you need to display additional tabs, you can achieve this through `additionalTabs`.
For the `string` variant of the `command` prop, an optional `exec` prop can be used for presenting binary execution usage (by changing the NPM tab's command prefix to `npx`).

You can also set different commands for each package manager by using the object form:

```tsx title="index.mdx"
import { PackageManagerTabs } from '@theme';

function App() {
  return (
    <PackageManagerTabs
      command={{
        npm: 'npm create rspress@latest',
        yarn: 'yarn create rspress',
        pnpm: 'pnpm create rspress@latest',
        bun: 'bun create rspress@latest',
        deno: 'deno init --npm rspress@latest',
      }}
    />
  );
}
```

:::tip

- In the install command, special processing has been done for yarn, pnpm, bun and deno. If your command is `install some-packages`, the install will be automatically replaced with add in the yarn/pnpm/bun/deno tab.
- In the deno tab, the `npm:` prefix will be added to the package by default if no source is specified.

:::

## PrevNextPage

The PrevNextPage component is used to display the previous and next pages of the current page. For example:

```tsx title="index.mdx"
import { PrevNextPage } from '@theme';

function App() {
  return (
    <PrevNextPage type="prev" text="Previous Page" href="https://rspress.rs/" />
  );
}
```

The types of props included are as follows:

```ts
interface PrevNextPageProps {
  // Set the link to the previous page or the next page through type
  type: 'prev' | 'next';
  // Used to set the text of the previous page or the next page
  text: string;
  // Used to set the link to the previous page or the next page
  href: string;
}
```

## SourceCode

The SourceCode component is used to jump to the source code. For example:

```tsx title="index.mdx"
import { SourceCode } from '@theme';

function App() {
  return (
    <SourceCode href="https://github.com/web-infra-dev/rspress/blob/main/packages/theme-default/src/components/SourceCode/index.tsx" />
  );
}
```

The effect is as follows:

import { SourceCode } from '@theme';

<SourceCode href="https://github.com/web-infra-dev/rspress/blob/main/packages/theme-default/src/components/SourceCode/index.tsx" />

The types of props included are as follows:

```ts
interface SourceCodeProps {
  // Used to set the link to the source code
  href: string;
  // Used to set source platform
  platform?: 'github' | 'gitlab';
}
```

## Steps

The Steps component is used to turn your content into a visual representation of steps.

```tsx title="index.mdx"
import { Steps } from '@theme';

function App() {
  return (
    <Steps>
      ### Step 1

      Body for Step 1.

      ### Step 2

      > Body for Step 2.
    </Steps>
  );
}
```

The effect is as follows:

import { Steps } from '@theme';

<Steps>
  ### Step 1

Body for Step 1.

### Step 2

> Body for Step 2.

</Steps>

## Tab/Tabs

You can use the `Tab` and `Tabs` component in the document to achieve the effect of tab switching. For example:

```mdx title="index.mdx"
import { Tab, Tabs } from '@rspress/core/theme';

<Tabs>
  <Tab label="Tab 1">Tab 1 content</Tab>
  <Tab label="Tab 2">Tab 2 content</Tab>
</Tabs>
```

import { Tab, Tabs } from '@theme';

<Tabs>
  <Tab label="Tab 1">Tab 1 content</Tab>
  <Tab label="Tab 2">Tab 2 content</Tab>
</Tabs>

### Code blocks

Using `Tabs` component to switch multiple code blocks.

````mdx title="index.mdx"
import { Tab, Tabs } from '@rspress/core/theme';

<Tabs>
  <Tab label="Tab 1">

```tsx title="src/index.mjs"
import foo from 'foo';
import bar from 'bar';
```

  </Tab>
  <Tab label="Tab 2">

```tsx title="src/index.cjs"
const foo = require('foo');
const bar = require('bar');
```

  </Tab>
</Tabs>
````

<Tabs>
  <Tab label="Tab 1">

```tsx title="src/index.mjs"
import foo from 'foo';
import bar from 'bar';
```

  </Tab>
  <Tab label="Tab 2">

```tsx title="src/index.cjs"
const foo = require('foo');
const bar = require('bar');
```

  </Tab>
</Tabs>

### Props

The props type of the Tabs component is as follows:

```ts
interface TabsProps {
  children: React.ReactNode;
  defaultValue?: string;
  groupId?: string;
  tabPosition?: 'left' | 'center';
}
```

- `defaultValue` is used to set the tab item selected by default. This value will be compared with the value field of the Tab component props, and if they are equal, the tab will be selected.
- `groupId` is used to sync the selected tab item between multiple Tabs components.The groups with the same groupId will be synchronized.
- `tabPosition` is used to set the position of the tab list, it has two values: `left` and `center`, the default is `left`.

The props types of the Tab component are as follows:

```ts
interface TabProps {
  label: string;
  // Used to identify the current tab, if not passed, the default label will be used
  value?: string;
  children: React.ReactNode;
}
```

The `value` field is used to identify the current tab, if not passed, the default label will be used.

## CodeBlockRuntime

Render code block in runtime

```tsx title="index.mdx"
import { CodeBlockRuntime } from '@theme';

function App() {
  return (
    <CodeBlockRuntime
      lang="js"
      title="index.js"
      code={`console.log('Hello World!')`}
      shikiOptions={{
        {/* shikiOptions */}
      }}
    />
  );
}
```

import { CodeBlockRuntime } from '@theme';

<CodeBlockRuntime
  lang="js"
  title="index.js"
  code={`console.log('Hello World!')`}
/>
